<template>
    <BaseDialog width="1000px" title="选择微信" :handleOk="handleOk" :handleCancel="handleCancel"
        :dialogVisible="props.dialogVisible" :footer="true">
        <div class="dialog__body">
            <div class="use_titile">选择微信</div>
            <BaseForm ref="searchForm" type="search" labelWidth="0px" :items="formItems" v-model:form="searchParams"
                @search="handleSearch">
            </BaseForm>

            <el-scrollbar class="scrollBox" style="max-height: 330px; margin-top: 10px">
                <ul style="max-height: 330px;">
                    <el-radio-group v-model="selectKey" style="display:block">
                        <li v-for="item in wxList" :key="item.wxUserId">
                            <el-radio @click="slectWx(item)" :label="item.wxUserId">{{ item.wxUserName }}<span
                                    v-if="item.realUserName">({{ item.realUserName }})</span></el-radio>
                        </li>
                    </el-radio-group>
                </ul>
            </el-scrollbar>
            <Pages v-model:page="page" :getTableData="handleSearch"></Pages>
        </div>
    </BaseDialog>
</template>
  
<script lang="ts" setup>
import { tagService } from "@/api/tag";
import { wxUserService } from "@/api/wxUser";
import Pages from "@/components/Pages.vue";
const props = defineProps({
    form: {
        type: Object,
    },
    dialogVisible: {
        type: Boolean,
    },
    optionRobot: {
        type: Array,
    },
    optionGroup: {
        type: Array,
    },
    selectItem: {
        type: String
    },

    handleCancel: {
        type: Function,
    },
    handleOk: {
        type: Function,
    },
});
const formItems = ref([
    {
        //name: '微信号',
        key: "wxUserId",
        type: "input",
        placeholder: "请输入微信号",
    },
    {
        //name: '微信昵称',
        key: "wxUserName",
        type: "input",
        placeholder: "请输入微信昵称",
    },

    {
        //name: '姓名',
        key: "realUserName",
        type: "input",
        placeholder: "请输入姓名",
    },
    {
        // name: '电话',
        key: "realPhone",
        type: "input",
        placeholder: "请输入电话",
    },
    {
        //name: '家庭地址',
        key: "address",
        type: "input",
        placeholder: "请输入家庭住址",
    },
    {
        //name: '用电户号',
        key: "consumerNumber",
        type: "input",
        placeholder: "请输入用电户号",
    },
    {
        //name: '好友机器人',
        key: "robotWxId",
        type: "select",

        options: props.optionRobot,
        placeholder: "请选择好友机器人",
    },
    {
        //name: '所属群聊',
        key: "wxGroupCode",

        type: "select",

        options: props.optionGroup,
        placeholder: "请选择所属群聊",
    },
    {
        //name: '标签搜索',
        key: "tagIds",
        type: "label",
        tagType: 1, //1：用户标签
        placeholder: "请选择标签",
    },
]);
const searchParams = ref({
    wxUserId: "",
    wxUserName: "",
    wxUserRemark: "",
    phone: "",
    realUserName: "",
    realPhone: "",
    address: "",
    tagIds: [],
});
const page = reactive({
    pageSize: 10,
    currentPage: 1,
    total: 0,
});
const wxList = ref([]);
const handleSearch = () => {
    wxUserService.getWxUserList({
        data: {
            ...searchParams.value,

            tagIds: searchParams.value.tagIds?.map((n) => n.tagId),
        },
        pageSize: page.pageSize,
        pageNumber: page.currentPage,
    }).then((res) => {
        wxList.value = res.data.content;
        page.total = res.data.total
    });
};

const handleCancel = () => {
    props.handleCancel();
};
const currentSelect = ref(null)
const handleOk = () => {

    props.handleOk(currentSelect.value);
}

const slectWx = (item) => {
    console.log("item",item)
    currentSelect.value = item
}
const selectKey = ref(null)
onMounted(() => {
    if(props.selectItem){
        selectKey.value=selectKey.value;
    }
    handleSearch();
});
</script>
  
<style lang="less" scoped>
.dialog__body {}
</style>
  